<template>
  <div>
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
  <el-row>
    <el-col :span="24"><div class="grid-content1 bg-purple-dark">
      <div class="block"><el-avatar shape="square" :size="200" :src="squareUrl" style="float: left;margin-left: 30px;margin-top: 30px"></el-avatar>
        <div style="height: 20px;text-align: left;padding-top: 40px"> <font style="text-align: left;margin-top: 40px">未命名</font><br/>
        <font style="text-align: left;margin-top: 40px">当前未开通VIP</font></div>
        <el-button style="margin-top: 80px;float: left">买会员赠好友</el-button>
        <el-button style="margin-top: 80px;float: left">使用兑换码</el-button>
      </div>
    </div></el-col>
  </el-row>
  <el-row>
  <div>
    <el-tabs type="border-card" stretch="true">
      <el-tab-pane label="黑胶VIP"><div>
        <el-card class="box-card">
          <div>
            {{'4.8元一月'}}
            {{'到期自动续费13元'}}
            {{'连续包月'}}
            <br>
          </div>
        </el-card>
        <el-card class="box-card">
          <div>
            {{'99元一年'}}
            {{'到期自动续费138元'}}
            {{'连续包年'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div>
            {{'26.8元一季'}}
            {{'到期自动续费39元'}}
            {{'连续包季'}}
          </div>
        </el-card>

        <el-card class="box-card" >
          <div  class="text item" style="width: 177px;">
            {{'158元'}}
            {{'连续包年套餐'}}
            {{'12个月'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div  class="text item">
            {{'88元'}}
            {{'14.66元一月'}}
            {{'6个月'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div  class="text item">
            {{'45元'}}
            {{'15元/月'}}
            {{'3个月'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div  class="text item" style="">
            {{'16元'}}
            {{'选择连续包月套餐可抽奖'}}
            {{'1个月'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div  class="text item">
            {{'9999元'}}
            {{'至尊VIP大礼包'}}
            {{'终生可用'}}
          </div>
        </el-card>
        <el-col :span="24"><div class="grid-content2 bg-purple-dark">
          <div>使用支付宝或微信扫码支付</div>
        </div></el-col>
        <el-col :span="24"><div class="grid-content3 bg-purple-dark">
          <span><el-divider >黑胶VIP特权</el-divider></span>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>会员曲库</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>免费下载</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>铃声</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>历史日推</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>歌词图片</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>无损音质</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>免广告</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>音效动效</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>头像挂件</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>个性皮肤</span>
            </div>
          </el-card>
        </div></el-col>
        <el-col :span="24"><div class="grid-content4 bg-purple-dark">
          <span><el-divider >VIP专享下载曲库</el-divider></span>
          <font>畅享2450万首VIP下载歌曲</font><br>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
           ></el-image>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
          ></el-image>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
          ></el-image>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
          ></el-image>
        </div></el-col>
      </div>
      </el-tab-pane>
      <el-tab-pane label="音乐包"><div>
        <el-card class="box-card">
          <div  class="text item">
            {{'8元/月'}}
            {{'可随时取消'}}
            {{'8元'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div  class="text item">
            {{'88元'}}
            {{'7.33元/月'}}
            {{'12个月'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div  class="text item">
            {{'45元'}}
            {{'7.5元/月'}}
            {{'6个月'}}
          </div>
        </el-card>
        <el-card class="box-card">
          <div  class="text item">
            {{'8元'}}
            {{'8块！'}}
            {{'1个月'}}
          </div>
        </el-card>
        <el-col :span="24"><div class="grid-content2 bg-purple-dark">
          <div>使用支付宝或微信扫码支付</div>
        </div></el-col>
        <el-col :span="24"><div class="grid-content3 bg-purple-dark">
          <span><el-divider >音乐包特权</el-divider></span>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>会员曲库</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>免费下载</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>铃声</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>历史日推</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>歌词图片</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>无损音质</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>免广告</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>音效动效</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>头像挂件</span>
            </div>
          </el-card>
          <el-card :body-style="{ padding: '0px' }" class="littlecard">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="height: 30px;width: 30px;margin: auto" class="image">
            <div style="padding: 14px;">
              <span>个性皮肤</span>
            </div>
          </el-card>
        </div></el-col>
        <el-col :span="24"><div class="grid-content4 bg-purple-dark">
          <span><el-divider >VIP专享下载曲库</el-divider></span>
          <font>畅享2450万首VIP下载歌曲</font><br>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
          ></el-image>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
          ></el-image>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
          ></el-image>
          <el-image
            style="width: 100px; height: 100px;margin-left: 100px"
            :src="url"
          ></el-image>
        </div></el-col>
      </div></el-tab-pane>
    </el-tabs>
  </div>

  </el-row>
      </el-main>

      <el-aside width="200px"></el-aside>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "vip",
      data(){
          return{
            input: '',
            url:'http://qhwykybp2.hd-bkt.clouddn.com/logo2.jpg',
            squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            activeName: 'first'
          }

      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClick(tab, event) {
          console.log(tab, event);
        }
      }
    }
</script>

<style scoped>
  el-row {
    margin-bottom: 20px;
 /* &:last-child {
     margin-bottom: 0;
   }*/
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #242424;
  }
  .bg-purple {
    background: #fff;
  }
  .bg-purple-light {
    background: #fff;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 80px;
  }
  .grid-content1 {
    border-radius: 4px;
    min-height: 300px;
    background-color: aquamarine;
  }
  .grid-content2 {
    border-radius: 4px;
    min-height: 80px;
    background-color: white;
  }
  .grid-content3 {
      border-radius: 4px;
      min-height: 80px;
      background-color: white;
    }
  .grid-content4 {
    border-radius: 4px;
    min-height: 80px;
    background-color: peachpuff;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #fff;
  }
  .el-main {
    background-color: white;
    color: #333;
    text-align: center;
    line-height: 50px;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 200px;
    float: left;
    margin-left: 80px;
  }
  .littlecard{
    width: 100px;
    float: left;
    margin-left: 90px;

  }
  .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 34px 0;
    margin-top: 45px;
  }
</style>
